<!DOCTYPE html>
<html class="no-js css-menubar" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="description" content="bootstrap admin template">
  <meta name="author" content="">
  <script type="text/javascript" src="../_resource/js/header.js"></script>
  <script>
    var RUN_FUNCS = [];
	var SITE_URL  = "http://admin.html.me";
	var CURR_CONTROLLER  = "Users";
	var CURR_ACTION  = "add";
    Breakpoints();
  </script>
  <style type="text/css">
    .list-table table td, .list-table table th{background:#fff; text-align:center;}
    .__access{display: none;}
  </style>
  </head>
<body class="dashboard">
  <!--[if lt IE 8]>
  <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-mega" role="navigation" id="navbardefaultmodel">
       <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('head_html')"></script>
  </nav>
  <div class="site-menubar">
    <div class="site-menubar-body" id="site-menubar-body">
         <script type="text/javascript" src="../_resource/js/include.js" onload="HM.SomeFun('nav_html')"></script>
    </div>
  </div>

  <!-- Page -->
<div class="page">
    <div class="page-content container-fluid">
        <div class="panel form-box " style="">
            <div class="panel-body">
                <form class="validate-form ajax-form" id="bossjobForm">
                    <div id="name-form-item"  class="form-group " style="">
                        <label for="name" class="control-label ">Name<span class="required">*</span>:</label>
                        <div>
                            <input type="text" name="name" id="user-name" class="form-control " style="" placeholder=""  value="" />
                        </div>
                    </div>
                    <div id="email-form-item"  class="form-group " style="" >
                        <label for="email" class="control-label ">Email<span class="required">*</span>:</label>
                        <div>
                            <input type="text" name="email" id="user-email" class="form-control " style="" placeholder=""  value="" disabled="disabled" />
                        </div>
                    </div>
                    <div id="role-form-item"  class="form-group " style="">
                        <label for="role" class="control-label ">Role:</label>
                        <div>
                        <select class="form-control form-control-sm" name="role_id" id="user-role-select"></select>
                        </div>
                    </div>
                    <div class="form-group">
                        <button type="button" id="user-submit" class="btn btn-lg btn-success">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function(){
    if(Api.Params()['id'] == window._sys['user']['id']){
        $.showSuccess('Can not modify user accout yourself.', 400);
        $('#user-name').attr('disabled', 'disabled');
        $('#user-role-select').attr('disabled', 'disabled');
        $('#user-submit').remove();
    }
    Api.Get('getRbacRoleList', {order_by:JSON.stringify({'status': 'asc', 'id' : 'desc'})}, function(object, error){
        if(object['status_code'] && object['message'] && object['status_code'] == 200 && object['message'] == 'OK'){
            var roleHtml = '<option value="0">Unknow Role</option>';
            for(var i=0; i<object['data']['data'].length; ++i){
                roleHtml = roleHtml + Api.render('<option value="{rid}">{rname}</option>', {
                    rid : object['data']['data'][i]['id'],
                    rname : object['data']['data'][i]['role_name'],
                });
            }
            $('#user-role-select').html(roleHtml);
            Api.Get('getRbacUserDetail', {id:Api.Params()['id']}, function(object, error){
                if(object['status_code'] && object['message'] && object['status_code'] == 200 && object['message'] == 'OK'){
                    $('#user-role-select').val(object['data'][0]['role_id']);
                    $('#user-name').val(object['data'][0]['name']);
                    $('#user-email').val(object['data'][0]['email']);
                }else{
                    $.showError('Something error, retry later.', 400, function(){
                        window.location.href = '/Users/index.html';
                    });
                }
            });
        }else{
            $.showError('Something error, retry later.', 400, function(){
                window.location.href = '/Users/index.html';
            });
        }
    });
    $('#user-submit').click(function(){
        var uid = Api.Params()['id'],
            name = $('#user-name').val().trim(),
            roleId = parseInt($('#user-role-select').val());
        if(name.length == ''){
            $.showError('User name can not be empty.', 400);
            return false;
        }
        if(isNaN(roleId) || 1 > roleId){
            $.showError('User Role can not be Unknow.', 400);
            return false;
        }
        var userData = {
            id : uid,
            name : name,
            role_id : roleId,
        };
        Api.Put('saveProfile', userData, function(object, error){
            if(object['status_code'] && object['message'] && object['status_code'] == 200 && object['message'] == 'OK' && object['data']['id']){
                $.showSuccess('Save user profile successfully.', 400, function(){
                    window.location.reload();
                }, 1000);
            }else{
                $.showError('Something error, retry later.', 400);
            }
        });
        return false;
    });
});
</script>
  <!-- Modal -->
  <div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
      <p></p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      <button type="button" class="btn btn-primary"></button>
      </div>
    </div>
    </div>
  </div>
  <div class="modal fade" id="alertModal" aria-hidden="true" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-center">
    <div class="modal-content">
      <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
            </button>
      <h4 class="modal-title"></h4>
      </div>
      <div class="modal-body">
      <p></p>
      </div>
    </div>
    </div>
  </div>
  <!-- End Modal -->
  <!-- End Page -->

  <!-- Footer -->
  <script type="text/javascript" src="../_resource/js/footer.js"></script>

    <script>
    (function(document, window, $) {
      'use strict';

      var Site = window.Site;
      $(document).ready(function() {
        Site.run();
          $('textarea[maxlength]').maxlength({
              threshold: 1000,
              placement: 'bottom-left-inside'
          });

          $.components.register("datepicker",{mode:"default",defaults:{autoclose:!0}});

        if (RUN_FUNCS.length > 0) {
          for(var i = 0; i < RUN_FUNCS.length; i++) {
            RUN_FUNCS[i].call();
          }
        }
      });
    })(document, window, jQuery);


  </script>
</body>
</html>